<template>
  <div class="orders-page">
    <div class="header">
      <h1>历史订单</h1>
    </div>
    
    <div class="orders-list">
      <div 
        v-for="order in orders" 
        :key="order.id"
        class="order-item"
      >
        <div class="order-header">
          <span class="order-id">订单号: {{ order.id }}</span>
          <span :class="['status', `status-${getStatusClass(order.status)}`]">
            {{ order.status }}
          </span>
        </div>
        <div class="order-items">
          <div 
            v-for="(item, index) in order.items" 
            :key="index"
            class="order-item-name"
          >
            {{ item }}
          </div>
        </div>
        <div class="order-total">
          实付: ¥{{ order.total }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useOrderStore } from '../store/orderStore'

export default {
  name: 'OrdersPage',
  setup() {
    const orderStore = useOrderStore()
    
    const orders = computed(() => orderStore.orders)
    
    const getStatusClass = (status) => {
      switch (status) {
        case '配送中':
          return 'delivering'
        case '准备中':
          return 'preparing'
        case '已完成':
          return 'completed'
        default:
          return ''
      }
    }
    
    return {
      orders,
      getStatusClass
    }
  }
}
</script>

<style scoped>
.orders-page {
  padding: 20px;
}

.header h1 {
  color: #333;
  margin-bottom: 20px;
}

.orders-list {
  margin: 20px 0;
}

.order-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.order-id {
  font-weight: bold;
}

.status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-delivering {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-preparing {
  background-color: #fff8e1;
  color: #ff8f00;
}

.status-completed {
  background-color: #e8f5e9;
  color: #388e3c;
}

.order-items {
  margin: 10px 0;
}

.order-item-name {
  color: #666;
  margin-bottom: 5px;
}

.order-total {
  text-align: right;
  font-weight: bold;
  color: #42b983;
}
</style>